<template>
  <div class="live-wrapper">
    <m-header title="比分直播" :left-options="{showBack: false}">
      <img
        @click="openSelectModal"
        class="rximg"
        slot="right"
        src="../../assets/imgs/live/schedule@2x.png"
        alt
      >
    </m-header>
    <div class="tab-wrapper">
      <div class="date-select">
        <div class="date-select-wrapper" @click="showDateSelect">
          <div class="time">
            {{currentDate}}
            <img class="little-icon" src="../../assets/imgs/live/x-down@2x.png" alt>
          </div>
          <!-- <x-icon v-if="showDate" type="ios-arrow-up" size="24"></x-icon> -->
        </div>
      </div>
      <tab class="custom-tabnav" custom-bar-width="1rem">
        <tab-item
          v-for="(item, index) in tabList"
          :key="index"
          :selected="tabIndex===index"
          @on-item-click="handleTabClick"
        >{{item}}</tab-item>
      </tab>
    </div>
    <div class="live-content">
      <fooball :liveList="liveList"/>
      <!-- <component :is="currentView[tabIndex]"></component> -->
    </div>

    <confirm
      v-model="showSelectModal"
      title="赛事筛选"
      @on-cancel="showSelectModal=false"
      @on-confirm="confirmSelectModal"
    >
      <div class="modal-tab-wrapper">
        <span
          :key="index"
          @click.stop="onModalTabChange(tab.key)"
          v-for="(tab, index) in allTabs"
          :class="tab.key===copyMode?'active-tab':''"
        >{{tab.value}}</span>
      </div>
      <div class="modal-match-wrapper">
        <span
          :key="index"
          @click.stop="onMatchSelect(match.key)"
          v-for="(match, index) in allMatchs"
          :class="copyMatch[match.key]?'active-match':''"
        >{{match.value}}</span>
      </div>
    </confirm>
    <datetime
      :show="showDate"
      v-model="currentDate"
      @on-confirm="dateConfirm"
      @on-cancel="dateCancel"
    ></datetime>
    <div v-transfer-dom>
      <loading :show="showData" text="数据加载中"></loading>
    </div>
  </div>
</template>
<script>
import { Datetime, Confirm, Loading } from 'vux';
import { mapActions } from 'vuex';
import moment from 'moment';
import Fooball from './Fooball';
import Basketball from './Basketball';

export default {
  components: {
    Datetime,
    Fooball,
    Basketball,
    Confirm,
    Loading
  },
  data () {
    return {
      showData: false,
      tabIndex: 0,
      currentView: [Fooball, Basketball],
      tabList: ['足球', '篮球'],
      currentDate: moment().format('YYYY-MM-DD'),
      allTabs: [{ key: '0', value: '全部' }, { key: '1', value: '反选' }],
      selectedTab: '',
      allMatchs: [],
      selectedMatchs: {},
      copyMatch: {},
      copyMode: '',
      showSelectModal: false,
      liveList: [],
      showDate: false
    };
  },
  watch: {
    currentDate () {
      this.fetchData();
    }
  },
  created () {
    this.tabIndex = this.$route.query.type * 1 || 0;
  },
  mounted () {
    this.fetchData();
  },
  methods: {
    ...mapActions({
      getLiveList: 'match/getLiveList'
    }),
    fetchData () {
      const nm_league_id = Object.keys(this.selectedMatchs)
        .filter(s => this.selectedMatchs[s])
        .join(',');
      const body = {
        type: this.tabIndex == 0 ? 1 : 2,
        day: this.currentDate,
        nm_league_id
      };
      this.showData = true;
      this.getLiveList(body).then(res => {
        this.showData = false;
        if (res) {
          this.liveList = res.live_list;
          this.allMatchs = res.league_list.map(
            ({ nm_league_id: key, short_name_zh: value }) => ({ key, value })
          );
        }
      });
    },
    handleTabClick (index) {
      this.tabIndex = index;
      this.selectedMatchs = {};
      this.$router.replace({ name: 'Live', query: { type: index } });
      this.fetchData();
    },
    onModalTabChange (key) {
      this.copyMode = key;
      this.allMatchs.forEach(s => {
        if (key === '0') {
          this.copyMatch[s.key] = true;
        } else if (key === '1') {
          this.copyMatch[s.key] = !this.copyMatch[s.key];
        }
      });
      this.$forceUpdate();
    },
    onMatchSelect (key) {
      const value = !!this.copyMatch[key];
      this.copyMatch[key] = !value;
      this.$forceUpdate();
    },
    openSelectModal () {
      this.showSelectModal = true;
      this.copyMatch = { ...this.selectedMatchs };
      this.copyMode = this.selectedTab;
    },
    confirmSelectModal () {
      this.selectedMatchs = { ...this.copyMatch };
      this.showSelectModal = false;
      this.selectedTab = this.copyMode;
      this.fetchData();
    },
    showDateSelect () {
      this.showDate = true;
    },
    dateConfirm () {
      this.showDate = false;
    },
    dateCancel () {
      this.showDate = false;
    }
  }
};
</script>
<style lang="less" scoped>
.live-wrapper {
  .tab-wrapper {
    .date-select {
      position: fixed;
      top: 0.92rem;
      left: 0.1rem;
      height: 0.7rem;
      width: 30%;
      padding-top: 0.05rem;
      background-color: white;
      .date-select-wrapper {
        width: 1.9rem;
        text-align: center;
        height: 0.6rem;
        line-height: 0.6rem;
        color: #666666;
        font-size: 0.26rem;
        border: 0.02rem solid #999999;
        border-radius: 0.4rem;
        margin: auto;
        .little-icon {
          margin-left: 0.02rem;
          width: 0.22rem;
        }
        // .weui-cell {
        //   padding: 0;
        // }
        // .weui-cell__ft:after{
        //   content: unset;
        // }
      }
    }
    .custom-tabnav {
      position: fixed;
      top: 0.92rem;
      left: 30%;
      width: 70%;
    }
  }
  .live-content {
    position: fixed;
    top: 1.72rem;
    width: 100%;
    bottom: 1rem;
    background: #f7f7f7;
    overflow-y: auto;
  }
  .modal-tab-wrapper {
    display: flex;
    margin-bottom: 0.2rem;
    // display: flex;
    justify-content: center;
    span {
      color: #747474;
      font-size: 0.26rem;
      width: 33.3%;
      padding: 0.12rem 0;
      border-top: 1px solid #d2d2d2;
      border-bottom: 1px solid #d2d2d2;
      border-left: 1px solid #d2d2d2;
      &.active-tab {
        background: #d44743;
        color: #fff;
      }
      &:nth-child(1) {
        border-top-left-radius: 0.1rem;
        border-bottom-left-radius: 0.1rem;
      }
      &:nth-child(2) {
        border-right: 1px solid #d2d2d2;
        border-top-right-radius: 0.1rem;
        border-bottom-right-radius: 0.1rem;
      }
    }
  }
  .modal-match-wrapper {
    text-align: left;
    span {
      display: inline-block;
      text-align: center;
      color: #747474;
      font-size: 0.26rem;
      width: 30%;
      padding: 0.12rem 0;
      border: 1px solid #d2d2d2;
      margin-bottom: 0.1rem;
      border-radius: 0.1rem;
      &.active-match {
        color: #d44743;
        border: 1px solid #d44743;
      }
      &:nth-child(3n + 2) {
        margin-left: 3%;
        margin-right: 3%;
      }
    }
  }
  .vux-datetime {
    display: none;
  }
}
</style>
<style>
/* .live-wrapper .weui-dialog__btn_primary {
  color: #d44743;
} */
</style>
